
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../static/js/echarts.js"></script>
    <style>
        .contain {
            display: flex;
        }

        .contain div {
            border: 1px solid;
            margin: auto 10px;
        }
    </style>
</head>

<body>
<div class="contain">
    <div id="main" style="width: 350px;height:200px;"></div>
    <div id="main1" style="width: 400px;height:200px;"></div>
    <div id="main2" style="width: 320px;height:260px;"></div>
    <div id="main3" style="width: 320px;height:260px;"></div>
</div>
<div class="contain">
    <div id="main4" style="width: 320px;height:260px;"></div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));
    var myChart3 = echarts.init(document.getElementById('main3'), 'dark');
    var myChart4 = echarts.init(document.getElementById('main4'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'bar示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    var option1 = {
        title: {
            text: 'line示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    var option2 = {
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                data: [
                    { value: 235, name: '视频广告' },
                    { value: 274, name: '联盟广告' },
                    { value: 310, name: '邮件营销' },
                    { value: 335, name: '直接访问' },
                    { value: 400, name: '搜索引擎' }
                ],
                itemStyle: {
                    // 阴影的大小
                    shadowBlur: 100,
                    // 阴影水平方向上的偏移
                    shadowOffsetX: 0,
                    // 阴影垂直方向上的偏移
                    shadowOffsetY: 0,
                    // 阴影颜色
                    shadowColor: 'rgba(0, 0, 0, 0.2)'
                }
            }
        ]
    };

    var option3 = {
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                data: [
                    { value: 235, name: '视频广告' },
                    { value: 274, name: '联盟广告' },
                    { value: 310, name: '邮件营销' },
                    { value: 335, name: '直接访问' },
                    { value: 400, name: '搜索引擎' }
                ],
                itemStyle: {
                    // 阴影的大小
                    shadowBlur: 100,
                    // 阴影水平方向上的偏移
                    shadowOffsetX: 0,
                    // 阴影垂直方向上的偏移
                    shadowOffsetY: 0,
                    // 阴影颜色
                    shadowColor: 'rgba(0, 0, 0, 0.2)'
                }
            }
        ]
    };
    var option4 = {
        series: {
            type: 'scatter',
            // 普通样式。
            itemStyle: {
                // 点的颜色。
                color: 'red'
            },
            label: {
                show: true,
                // 标签的文字。
                formatter: 'This is a normal label.'
            },
            // 高亮样式。
            emphasis: {
                itemStyle: {
                    // 高亮时点的颜色。
                    color: 'blue'
                },
                label: {
                    show: true,
                    // 高亮时标签的文字。
                    formatter: 'This is a emphasis label.'
                }
            }
        }
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart1.setOption(option1);
    myChart2.setOption(option2);
    myChart3.setOption(option3);
    myChart4.setOption(option4);
</script>

</body>

</html>
